<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <title>智能化停车场系统</title>
    <style>
        i {
            font-size: 30px
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">智能化停车场系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a data-src="/desk/console" data-title="控制台" data-menuId="-1"
                                          id="console"><i class="layui-icon layui-icon-console"></i> 控制台</a></li>
            <li class="layui-nav-item"><a href="/desk/in"><i class="layui-icon layui-icon-add-circle"></i> 模拟入场扫描</a>
            </li>
            <li class="layui-nav-item"><a href="/desk/out"><i class="layui-icon layui-icon-add-circle"></i> 模拟出场扫描</a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" id="user">
                    <img class="layui-nav-img" id="headImg">
                </a>
                <dl class="layui-nav-child">
                    <dd><a data-src="/desk/jibenziliao" data-menuId="-2" data-title="基本资料" id="jiBen">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a id="exit">退了</a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
            </ul>
        </div>
    </div>
    <div class="layui-body" style="height: 100%">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowClose="true" style="height: 90%;">
            <ul class="layui-tab-title" style="margin-top: -10px;">
            </ul>
            <div class="layui-tab-content" style="height: 91%">
            </div>
        </div>
    </div>
    <div class="layui-footer" style="">
        <!-- 底部固定区域 -->
        © 智能停车场系统
    </div>
</div>
<script src="/static/assets/jquery.min.js"></script>
<script src="/static/assets/layui.js"></script>
<script>
    $(function () {

        $.ajax({
                url: "/user/selectById",
                type: "post",
                headers: {'Content-Type': 'application/json;charset=utf8'},
                data: JSON.stringify({userId: sessionStorage.getItem("userId")}),
                dataType: "json",
                success: function (res) {
                    console.log(res)
                    $("#headImg").attr("src", res.data.user.headImg)
                    $("#user").append(res.data.user.realName)
                }
            })
        $.ajax({
                url: "/desk/getMenu",
                type: "post",
                headers: {'Content-Type': 'application/json;charset=utf8'},
                data: JSON.stringify({"roleId": sessionStorage.getItem("roleId")}),
                dataType: "json",
                success: function (data) {
                    var parent = new Array();
                    var icon = ['layui-icon-group', 'layui-icon-engine', 'layui-icon-util', 'layui-icon-snowflake', 'layui-icon-tree', 'layui-icon-chart-screen'];

                    // 循环遍历菜单
                    for (var i = 0; i < data.data.menus.length; i++) {
                        //当parentId = -1时，为一级菜单
                        if (data.data.menus[i].parentId === -1) {
                            parent[i] = data.data.menus[i];
                            $("#menu").append(
                                "<li class=\"layui-nav-item\" id='menu" + parent[i].menuId + "'>\n" +
                                "                        <a class=\"\" href=\"javascript:;\">" +
                                "<i class='layui-icon " + icon[i] + "'></i>" + parent[i].menuName + "</a>\n" +
                                "                        <dl class=\"layui-nav-child\"></dl>\n" +
                                "                    </li>");
                        } else {
                            //循环6次
                            for (var m = 1; m <= 6; m++) {
                                // 每次循环判断父级id等于循环的m值,等于则将其放置于id为menu+m的菜单下
                                if (data.data.menus[i].parentId === m) {
                                    $("#menu" + m + " dl").append(" " +
                                        "<dd class=\"main_left\">" +
                                        "<a data-menuId='" + data.data.menus[i].menuId +
                                        "' data-title='" + data.data.menus[i].menuName + "'" +
                                        " class=\"aa\" data-src=\"" + data.data.menus[i].href + "\" target=\"_top\">"
                                        + data.data.menus[i].menuName + "</a>" +
                                        "</dd>")
                                }
                            }
                        }
                    }
                    layui.use(['element', 'layer'], function () {
                        var element = layui.element,
                            layer = layui.layer
                        function FrameWH() {
                            $(".layui-tab-item").css("height", "100%")
                            $("iframe").css("height", "100%");
                            $("iframe").css("width", "100%");
                        }

                        var active = {
                            //在这里给active绑定几项事件，后面可通过active调用这些事件
                            tabAdd: function (url, id, name) {
                                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                                var body_url = url;
                                console.log("要切换的页面地址=" + body_url);
                                element.tabAdd('demo', {
                                    title: name,
                                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + body_url + '"></iframe>',
                                    id: id //规定好的id
                                })
                                FrameWH();  //计算ifram层的大小
                            },
                            tabChange: function (id) {
                                //切换到指定Tab项
                                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
                            },
                            tabDelete: function (id) {
                                element.tabDelete("demo", id);//删除
                            }
                        };

                        active.tabAdd("/desk/console", "-1", "控制台");

                        $("#console").on('click', function () {
                            var address = $(this).attr("data-src");
                            var dataid = $(this);
                            console.log("dataid" + dataid)
                            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                                //如果比零小，则直接打开新的tab项
                                console.log("没有tab页，新建tab页");
                                active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                            } else {
                                //否则判断该tab项是否已经存在
                                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                                $.each($(".layui-tab-title li[lay-id]"), function () {
                                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                                    if ($(this).attr("lay-id") === dataid.attr("data-menuId")) {
                                        console.log("如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开");
                                        isData = true;
                                    }
                                })
                                if (isData === false) {
                                    //标志为false 新增一个tab项
                                    console.log("新增一个tab项")
                                    active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                                }
                            }
                            //最后不管是否新增tab，最后都转到要打开的选项页面上
                            active.tabChange(dataid.attr("data-menuId"));
                        })

                        $("#jiBen").on("click", function () {
                            var address = $(this).attr("data-src");
                            var dataid = $(this);
                            console.log("dataid" + dataid)
                            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                                //如果比零小，则直接打开新的tab项
                                console.log("没有tab页，新建tab页");
                                active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                            } else {
                                //否则判断该tab项是否已经存在
                                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                                $.each($(".layui-tab-title li[lay-id]"), function () {
                                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                                    if ($(this).attr("lay-id") === dataid.attr("data-menuId")) {
                                        console.log("如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开");
                                        isData = true;
                                    }
                                })
                                if (isData === false) {
                                    //标志为false 新增一个tab项
                                    console.log("新增一个tab项")
                                    active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                                }
                            }
                            //最后不管是否新增tab，最后都转到要打开的选项页面上
                            active.tabChange(dataid.attr("data-menuId"));
                        })

                        active.tabChange("-1");

                        $("#exit").on("click", function () {
                            layer.msg('真的要退出吗？', {
                                time: 20000, //20s后自动关闭
                                btn: ['退出', '取消']
                            }, function () {
                                layer.msg('退出中！！！', {icon: 1});
                                sessionStorage.clear()
                                $.ajax({
                                    url: "/user//exit",
                                    type: "post",
                                    dataType: 'json',
                                    success: function (res) {
                                        location.href='http://localhost:8081/desk/login'
                                    }
                                })

                            }, function () {
                                layer.msg('取消', {icon: 2});
                                location.reload()
                            });
                        })

                        //获取src值
                        $(".main_left a").on("click", function () {
                            var address = $(this).attr("data-src");
                            var dataid = $(this);
                            console.log("dataid" + dataid)
                            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                                //如果比零小，则直接打开新的tab项
                                console.log("没有tab页，新建tab页");
                                active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                            } else {
                                //否则判断该tab项是否已经存在
                                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                                $.each($(".layui-tab-title li[lay-id]"), function () {
                                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                                    if ($(this).attr("lay-id") === dataid.attr("data-menuId")) {
                                        console.log("如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开");
                                        isData = true;
                                    }
                                })
                                if (isData === false) {
                                    //标志为false 新增一个tab项
                                    console.log("新增一个tab项")
                                    active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                                }
                            }
                            //最后不管是否新增tab，最后都转到要打开的选项页面上
                            active.tabChange(dataid.attr("data-menuId"));
                        })
                    })


                },
                error: function () {
                    console.log("请求失败")
                }
            })
    })


</script>
</body>
</html>

